<script lang="ts" setup>

    //@ts-ignore
    import  {reactive,defineProps,defineEmits,watch,onMounted,ref} from 'vue';
    import UploadImg from './uploadImg.vue'
    import UploadMv from './uploadMv.vue'
    import {addProduct,updateProduct} from '@/service/product/index.ts'
    //@ts-ignore
    import  {defaultFormConfig,editMode} from '../const.js'
    const props=defineProps({
        visible: Boolean,
        record:Object,
        mode:String
    })
    const emit = defineEmits(['confirm','afterClose'])

    const formRef=ref(null);

    const state=reactive({
        title:'编辑',
        open:false,
        loading:false,
        formState:{
            "title": "",
            "content": "",
            "description": "",
            "type": "",
            "img": "",
            "img_d": "",
            "mov_id": "",
            "create_user": "",
        },
        rules: {
        title: [{ required: true,trigger: 'change' }],
            content: [{ required: true,trigger: 'change' }],
            description: [{ required: true,trigger: 'change' }],
            type: [{ required: true,trigger: 'change' }],
            img: [{ required: false,trigger: 'change' }],
            img_id: [{ required: false,trigger: 'change' }],
            mov_id: [{ required: false,trigger: 'change' }],
            create_user: [{ required: true,trigger: 'change' }],
    }
    })




    const afterClose=()=>{
        emit('afterClose')
    }

    const confirm=()=>{
        console.log('ok')
        console.log('formRef',formRef)
        formRef.value.validate().then(async res=>{
            console.log('res',res)
            state.loading=true
            try{
                if(props.mode===editMode.add){
                    await addProduct({
                        ...state.formState
                    })
                }
                else if(props.mode==editMode.edit){
                    await updateProduct({
                        id:props.record.id,
                        ...state.formState
                    })
                }
                emit('confirm')
            }
            catch (e) {
                state.loading=false
                console.error(e)
            }
        })
        // emit('confirm')
    }

    const onFinish = (values: any) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    watch(()=>props.visible,
        (value:boolean)=>{
            console.log('visible value change',value)
            state.open=value
        },{
            deep:true,
            immediate:true
        })

    watch(()=>props.record,
        (value)=>{
            state.formState={...value}
        },{
            deep:true,
            immediate:true
        })

    watch(()=>props.mode,
        (value)=>{
            if(value===editMode.add){
                state.title='新增'
            }
            else{
                state.title='编辑'
            }
        },{
            deep:true,
            immediate:true
        })
    onMounted(()=>{
        console.log('props',props)
    })


</script>

<template>
<div>
    <a-modal :title="state.title"
            v-model:visible="state.open"
            :afterClose="afterClose"
             :loading="state.loading"
            @ok="confirm"
            style="width:900px;overflow: auto"
    >
<div>
    <a-form layout="vertical"
            ref="formRef"
            :model="state.formState"
            :rules="state.rules"
            name="editForm"
            autocomplete="off"
    >
        <a-form-item
                label="title"
                name="title"

        >
            <a-input v-model:value="state.formState.title" placeholder="请输入名称"/>
        </a-form-item>
        <a-form-item
                label="content"
                name="content"

        >
            <a-input v-model:value="state.formState.content" placeholder="请输入内容"/>
        </a-form-item>
        <a-form-item
                label="description"
                name="description"

        >
            <a-input v-model:value="state.formState.description" placeholder="请输入描述"/>
        </a-form-item>
        <a-form-item
                label="type"
                name="type"

        >
            <a-input v-model:value="state.formState.type" placeholder="请输入类型" />
        </a-form-item>
        <a-form-item
                label="img"
                name="img"

        >
            <div style="display: flex">
                <a-input v-model:value="state.formState.img" placeholder="请输入图片链接"/>
                <a-image :src="state.formState.img" :width="50"/>
            </div>
        </a-form-item>

        <a-form-item
                label="img_id"
                name="img_id"

        >
            <UploadImg :id="state.formState.img_id" @confirm="(id)=>{
            state.formState.img_id=id
}"/>
        </a-form-item>
        <a-form-item
                label="mov_id"
                name="mov_id"

        >
            <UploadMv :id="state.formState.mov_id" @confirm="(id)=>{
            state.formState.mov_id=id
}"/>
        </a-form-item>
        <a-form-item
                label="create_user"
                name="create_user"

        >
            <a-input v-model:value="state.formState.create_user" placeholder="请输入创建人"/>
        </a-form-item>

    </a-form>
</div>
    </a-modal>
</div>
</template>
